<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/plantillas/plantillaPrincipal.xhtml">
        <ui:define name="contenido">
            <f:view>
                <h:form id="formNuevoUsuario">
                    <h:panelGrid columns="1" style="width:40%;margin: 0px auto;">
                        <p:commandButton id="btnNuevoUsuario" action="#{MBUsuario.nuevo()}" value="AGREGAR USUARIO" ajax="false"/>
                    </h:panelGrid> 
                </h:form>
                <h:form id="formBusquedaUsuario">
                    <p:panel id="pnlBusquedaUsuarios" header="Consultar Usuarios" style="width:40%;margin: 5px auto" 
                             toggleable="true" widgetVar="buscar" collapsed="#{BKUsuario.listaUsuarios ne null}" >
                        <h:panelGrid columns="2" columnClasses="label, value" styleClass="grid" style="width:100%;margin: 0px auto">
                            <h:outputLabel id="lblNombreUsuarioBuscar" value="USUARIO : " class="lblBusqueda" style="font-weight: bold"/>
                            <p:inputText id="txtNombreUsuarioBuscar" value="#{BKUsuario.usuarioBusqueda.usuario}" size="20"/> 
                            <h:outputLabel id="lblNombreNombreBuscar" value="NOMBRES : " class="lblBusqueda" style="font-weight: bold"/>
                            <p:inputText id="txtNombreNombreBuscar" value="#{BKUsuario.usuarioBusqueda.nombres}" size="30"/>
                            <h:outputLabel id="lblNombreApellidosBuscar" value="APELLIDOS :" class="lblBusqueda" style="font-weight: bold"/>
                            <p:inputText id="txtNombreApellidosBuscar" value="#{BKUsuario.usuarioBusqueda.apellidos}" size="30" />
                        </h:panelGrid>
                        <br/>
                        <center>
                            <h:panelGrid columns="3" columnClasses="label, value" styleClass="grid" style="">
                                <p:commandButton id="btnBuscarUsuario" value="Buscar" update="pnlBusquedaUsuarios,dataTablaUsuarios"  
                                                 actionListener="#{MBUsuario.buscar}"
                                                 oncomplete="listaUsuario.show();buscar.toggle()" style="font-size: 12px"/>
                            </h:panelGrid>
                        </center>

                    </p:panel>

                    <p:panel id="pnlDataTablaUsuarios" header="Lista de Usuarios" closable="true" style="width:90%;margin: 10px auto" visible="#{BKUsuario.listaUsuarios ne null}"
                             widgetVar="listaUsuario" >


                        <p:dataTable id="dataTablaUsuarios" var="usuario" value="#{BKUsuario.listaUsuarios}" 
                                     widgetVar="carsTable" emptyMessage="No se encontraron usuarios"  paginatorPosition="bottom" styleClass="datable-busqueda"
                                     filteredValue="" paginator="true" rows="20" rowIndexVar="rowIndex" style="width:100%"
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                                     {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" scrollable="true" scrollHeight="250"
                                     rowsPerPageTemplate="20,40,60" sortOrder="ascending" sortBy="#{usuario.usuario}" > 
                            <f:facet name="header" >
                                <p:outputPanel layout="block" >
                                    <h:commandButton value="Exportar EXCEL">  
                                        <p:dataExporter type="xls" target="dataTablaUsuarios" fileName="usuarios" />  
                                    </h:commandButton>  

                                    <h:commandButton value="Exportar PDF">  
                                        <p:dataExporter type="pdf" target="dataTablaUsuarios" fileName="usuarios"/>  
                                    </h:commandButton>
                                </p:outputPanel>

                            </f:facet>
                            <p:column id="idColumnaNum"	headerText="Num." style="width: 5%"> 
                                <h:outputText value="#{rowIndex+1}" /> 
                            </p:column>

                            <p:column id="idColumnaUsuario" sortBy="#{usuario.usuario}" style="width:20%"> 
                                <f:facet name="header">  
                                    <h:outputText value="Usuario" />  
                                </f:facet> 
                                <h:outputText value="#{usuario.usuario}" /> 
                            </p:column>

                            <p:column id="idColumnaNombres" sortBy="#{usuario.nombres}" style="width:55%"> 
                                <f:facet name="header">  
                                    <h:outputText value="Nombre Completo" />  
                                </f:facet> 
                                <h:outputText value="#{usuario.nombres} #{usuario.apellidos}" /> 
                            </p:column>

                            <p:column id="idAccionesUsuario" headerText="Acciones" style="width:20%;text-align: center" exportable="false">
                                <p:commandButton icon="ui-icon-search" title="Ver" ajax="false" action="#{MBUsuario.ver()}">
                                    <f:setPropertyActionListener value="#{usuario}" target="#{BKUsuario.usuarioSeleccionado}" />  
                                </p:commandButton>
                                <p:commandButton icon="ui-icon-pencil" title="Editar" ajax="false"  action="#{MBUsuario.editar()}">
                                    <f:setPropertyActionListener value="#{usuario}" target="#{BKUsuario.usuarioSeleccionado}" />  
                                </p:commandButton>  
                                <p:commandButton id="btnEliminarUsuario" title="Eliminar" icon="ui-icon-trash"  oncomplete="confirmacion.show()">
                                    <f:setPropertyActionListener value="#{usuario}" target="#{BKUsuario.usuarioSeleccionado}" />
                                </p:commandButton>
                            </p:column>

                        </p:dataTable>	
                    </p:panel>
                    <p:confirmDialog id="dlgEliminarUsuario" message="¿ Desea realmente eliminar este usuario ?"
                                     header="Eliminar Usuario" severity="alert" widgetVar="confirmacion">
                        <h:panelGrid style="width: auto;margin:0px auto;border:0px;padding: 0 5px" columns="2">
                            <p:commandButton id="btnConfEliUsuario" update="dataTablaUsuarios" value="Si"  oncomplete="confirmacion.hide()"  
                                             actionListener="#{MBUsuario.eliminar}" style="text-align: center" />  
                            <p:commandButton id="btnCancEliUsuario" value="No" onclick="confirmacion.hide()" type="button" style="text-align: center" />   
                        </h:panelGrid>
                    </p:confirmDialog>
                </h:form>
            </f:view>
        </ui:define>
    </ui:composition>
</html>   
